<template>
  <div class="memory-contain" :style="`height:${boxHeight}px`">
    <div class="spell-study-box">
      <div class="memory-question">
        <div class="spell-container">
          <div class="memory-header">{{ title+"-"+content }}</div>
          <div class="spell-contain">
            <slot></slot>
          </div>
        </div>
      </div>
      <div class="btn-next">
        <span v-if="type == 2">
          <el-button
            class="button btn-next-test"
            v-show="isShowBtn"
            @click="goNext"
            >听读测验</el-button
          >
        </span>
        <span v-else class="click" @click="goNext" v-show="isShowBtn">
          <img src="@/assets/img/naturalSpell/btn-next-icon.png" alt="" />
        </span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {
    goNext() {
      this.$emit("goNext");
    },
  },
  props: {
    content:{
      type: String,
    },
    title: {
      type: String,
    },
    boxHeight: {
      type: Number,
    },
    isShowBtn: {
      type: Boolean,
      default: false,
    },
    type: {
      type: Number,
    },
  },
};
</script>